<template>
	<view class="flex  flex-col flex-v-center">
		<view class="top">
			<view class="title flex flex-h-center">挪车二维码已生成，保存图片</view>
			<view class="copy flex flex-h-center flex-v-center" @click="print">
				<image src="../static/image/copy.png" mode=""></image>
				<text>打印指南</text>
			</view>
		</view>
		<xinyu-canvas-drawer ref="poster" :width="650" :height="550">
			<template v-slot="{src}">
				<image :src="src" style="width: 650rpx;height: 550rpx;"></image>
			</template>
		</xinyu-canvas-drawer>
		<view class="bottomButton fixedBottom">
			<view class="tips flex flex-h-center">将此二维码贴在车身，别人可以扫码通知您挪车</view>
			<view class="button" @click="saveImageToPhotosAlbum">
				保存图片
			</view>
		</view>
	</view>
</template>

<script>
	import XinyuCanvasDrawer from "@/components/xinyu-canvas-drawer/index.vue";
	export default {
		data() {
			return {
				isCanvasLoading: false,
				posterRef: null,
				content:'',
				url:""
			}
		},
		components: {
			XinyuCanvasDrawer
		},
		// async mounted() {
				  
		// 			this.posterRef = this.$refs.poster;
		// 			this.LoadingMsg( "渲染海报中");
		// 			var img = await this.posterRef
		// 				.addImage(require('@/static/image/codebg.png'), 70, 50,500, 500, false)
		// 				.addImage(`${this.url}`, 205, 180, 240, 240, false) 
		// 				.draw();
		// 			this.isCanvasLoading = true;
		// 			uni.hideLoading();
		// },
		onShow() {
			if(!uni.getStorageSync('token')){
				uni.navigateTo({
					url:"./login/login"
				})
			}else{
				this.getCode();
			}
		},
		methods: {
			 getCode(){
				this.$https.request('/cli/wxcode', true, {
					path:"pages/move"
				}).then((res) => {
					if (res.code == 0) {
						this.url = res.msg
						this.getplaybill();
						uni.setStorageSync("codeImg",res.msg)
					}else if (res.code == 201) {
						uni.navigateTo({
							url:'../login/login'
						})
				
					} else {
						this.LoadingMsg(res.msg);
						setTimeout(function() {
							uni.hideLoading();
						}, 1000)
					}
							
				})
			},
			getplaybill(){
				this.posterRef = this.$refs.poster;
				this.LoadingMsg("海报渲染中，请稍后...");
				var img =  this.posterRef
				 //    .addText("临时停靠，请多关照",100, 60,50, "#fff") //绘制文本
					// .setBackgroundColor("#2A90FF") //指定渲染图片的背景色
					// .addRect(310, 150, 260, 280, "#fff")
					.addImage(require('@/static/image/codebg.png'), 70, 50,500, 500, false) 
					.addImage(`${this.url}`, 205, 174, 240, 240, false) 
					// .addaddImage(`${this.url}`, 350, 180, 180, 180) //绘制二维码（不要太长否则会扫不出来）
					// .addText("微信扫一扫，联系车主", 330,380, 22, "#4BA0FF") //绘制文本
					// .addText("虚拟拨号 保护隐私", 118, 470,50, "#fff") //绘制文本
					// .addRect(75, 150, 180, 280, "#fff")
					// .addText("挪", 125,200, 85, "#4BA0FF") //绘制文本
					// .addText("车", 125,320, 85, "#4BA0FF") //绘制文本
					.draw();
				this.isCanvasLoading = true;
				uni.hideLoading();
			},
			saveImageToPhotosAlbum() {
				if (!this.isCanvasLoading){
						 uni.showToast({
							title: "稍安勿躁，图片还没有加载完哦~",
							icon: "none",
						})
						// 延时关闭 加载中的 loading框
						setTimeout(()=>{
							uni.hideLoading()
						},1500)
					}else{
						this.posterRef.saveImageToPhotosAlbum();
						uni.showToast({
							title: "已保存手机相册",
							icon: "none",
						})
						// 延时关闭 加载中的 loading框
						setTimeout(()=>{
							uni.hideLoading()
						},1500)
					}
				  		
				
					
			},
			print(){
				uni.navigateTo({
					url:'./guide'
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>

<style lang="less" scoped>
	.top{
		.title{
			font-family: HiraginoSansGB-W3;
			color: #333;
			font-size:30rpx;
			width: 100%;
			padding: 95rpx 0 40rpx 0;
		}
		.copy{
			width: 100%;
			padding-bottom: 75rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			text{
				font-family: HiraginoSansGB-W3;
				color: #2A90FF;
				font-size:30rpx;
				padding-left: 6rpx;
			}
		}
	}
	.bottomButton {
		width: 100%;
		height: 100rpx;
		padding: 9rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;

		.button {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
			background: #2A90FF;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 82rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	}

	.fixedBottom {
		position: fixed;
		bottom: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 60rpx;
		.tips{
			font-family: HiraginoSansGB-W3;
			color: #666;
			font-size: 24rpx;
			padding-bottom: 30rpx;
		}
	}
</style>
